import React, { Component } from 'react'
import { Link } from "react-router-dom"
import { LeftOutlined, RightOutlined , AlipayCircleOutlined } from '@ant-design/icons';
import {Button} from "antd"
import "./accountSafe.css"
import { cancellation } from '../../api/login';

export default class accountSafe extends Component {

    cancellationMine() {
        cancellation({token:sessionStorage.getItem("token")})
    }

    render() {
        const binding = [
            {
                name:"支付宝"
            },
            {
                name:"微信账号"
            },
            {
                name:"QQ账号"
            },
            {
                name:"新浪微博"
            },
            {
                name:"小米账号"
            },
        ]
        let phoneNamber = "15142527876"
        return (
            <div className="accountMain">
                <div className="AccountHeader">
                    <Link to="/set" className="AccountBack">
                        <LeftOutlined />
                    </Link>
                    <span>
                        账户与安全
                    </span>
                </div>
                <div className="accountRevise">
                    <div className="accountPhone">
                        <div>
                            <div>手机号</div>
                            <span>已绑定{phoneNamber}</span>
                        </div>
                        <div className="accountButton"><Button href="/phoneTest" block size="small">修改</Button></div>
                    </div>
                    <div>
                        <Link to="/changePassword">
                            <div>
                                <div>修改密码</div>
                            </div>
                            <div><RightOutlined /></div>
                        </Link>
                    </div>
                    <div>
                        <Link>
                            <div>
                                <div>账号保护</div>
                            </div>
                            <div><span>已保护</span><RightOutlined /></div>
                        </Link>
                    </div>
                    <div>
                        <Link>
                            <div>
                                <div>nice认证</div>
                            </div>
                            <div><RightOutlined /></div>
                        </Link>
                    </div>
                </div>
                <div className="accountBinding">
                    <h2>您正使用手机号登录</h2>
                    {binding.map((item,i) => 
                    <div>
                        <div>
                            <AlipayCircleOutlined />
                            <span className="accountZhib">{item.name}</span>
                        </div>
                        <div className="accountButton">
                            <Button type="primary" size="small">绑定 </Button>
                        </div>
                    </div>)}
                    
                </div>
                <div className="cancellation" onClick={this.cancellationMine}>
                    <Link>账号注销</Link>
                </div>
            </div>
        )
    }
}
